<template>
	<view class="page">
		<u-navbar
			title="详情"
			@rightClick="rightClick"
			:autoBack="true"
		>
			<view class="" slot="right">
				<u-icon name="close" color="#666" size="20"></u-icon>
			</view>
		</u-navbar>
		
		<view class="device">
			<view class="device__params">
				<text>所属设备：</text>
				<text>{{data.DeviceName}}</text>
				<view class="" style="position: absolute;right: 20rpx;top: 50%;transform: translateY(-50%);color: #007AFF;font-size: 25rpx;" @click="goPage">设备信息</view>
			</view>
			<view class="device__params">
				<text>所在部位：</text>
				<text>{{data.buwei}}</text>
			</view>
		</view>
		<view class="cnl">
			<view class="cnl__params">
				<text>点位名称：</text>
				<text>{{data.Name}}</text>
			</view>
			<view class="cnl__params">
				<text>编码：</text>
				<text>{{data.CnlCode}}</text>
			</view>
			<view class="cnl__params">
				<text>单位：</text>
				<text>{{data.Unit}}</text>
			</view>
			<view class="cnl__params">
				<text>更新时间：</text>
				<text>{{data.DateTime}}</text>
			</view>
		</view>
		<view class="page__date">
			<view class="">
				<u-icon name="arrow-left" color="#666" size="20" @click="prev"></u-icon>
			</view>
			<view class="" @click="dateVisible = true">{{date}}</view>
			<view class="">
				<u-icon name="arrow-right" color="#666" size="20" @click="next"></u-icon>
			</view>
		</view>
		<view class="page__chart">
			<chart :options="options" />
		</view>
		
		<u-datetime-picker
				:show="dateVisible"
				v-model="defaultDate"
				mode="date"
				closeOnClickOverlay
				@cancel="dateVisible = false"
				@close="dateVisible = false"
				@confirm="dateConfirm"
		></u-datetime-picker>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import {
		getTableSuffix
	} from '@/common/custom_util.js'
	import moment from 'moment'
	import Chart from '@/components/custom/chart/echart.vue'
	
	export default {
		components: {
			Chart
		},
		data() {
			return {
				data: {},
				date: moment().format('YYYY-MM-DD'),
				defaultDate: moment().format('YYYY-MM-DD'),
				dateVisible: false,
				showDevice: false,
				options: {
					animation: false,
					legend: {
						left: '2%',
						bottom: '0',
						icon: "circle",
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							color: '#333',
							fontSize: 14,
						},
						data: [{
							name: '',
						}],
					},
					dataZoom: { // 放大和缩放
						type: 'inside'
					},
					tooltip: {
						trigger: 'axis',
						confine: true,
						format: 'markPointTooltipFormat'
					},
					grid: {
						top: '20%',
						left: '13%',
						bottom: '16%',
						right: '5%'
					},
					xAxis: [{
						type: 'time',
						min: '',
						max: '',
						minInterval: 24,
						boundaryGap: false,
						axisTick: {
							show: false,
						},
						axisLabel: {
							format: 'xLabelFormat'
						},
						splitLine: {
							show: false,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#666'
							},
						},
					}],
					yAxis: {
						type: 'value',
						name: '',
						nameTextStyle: {
							color: '#666',
							padding: [0, 0, 0, 0],
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#666'
							},
						},
					},
					series: [{
						name: '',
						data: [],
						type: 'line',
						itemStyle: {
							normal: {
								width: 1,
								color: '#fbb034',
							},
						},
						symbol: 'none',
						label: {
							show: false,
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: '#fbb034',
									},
									{
										offset: 0.8,
										color: 'rgba(255, 222, 181, 0.5)',
									}
								],
								global: false
							}
						},
						markPoint: {
							symbol: 'image:///static/theme/default/home/gaojing.png',
							symbolSize: 30, 
							data: [],
							tooltip:{
							  trigger:'item',
							  format: 'markPointTooltipFormat'
							},
						},
					}]
				},
			}
		},
		onLoad(options) {
			this.data = JSON.parse(options.data);
			this.getChartData();
		},
		methods: {
			/**
			 * 获取点位小时平均数据
			 */
			getCnlDataList() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getCnlDataList',
						apiparam: {
							tablesuffix: getTableSuffix(this.date),
							cnlcode: this.data.CnlCode,
							startdate: moment(this.date).format('YYYY-MM-DD'),
							enddate: moment(this.date).format('YYYY-MM-DD')
						},
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 点标记数据
			 */
			getChatAlarmInfoList() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getChatAlarmInfoList',
						apiparam: {
							cnlcode: this.data.CnlCode,
							startdate: moment(this.date).format('YYYY-MM-DD'),
							enddate: moment(this.date).format('YYYY-MM-DD')
						},
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 获取图表的数据
			 */
			getChartData() {
				Promise.all([this.getCnlDataList(),this.getChatAlarmInfoList()]).then(res => {
					let cnlData = res[0];
					if(!cnlData.length) {
						this.options.series[0].data = [];
						return
					}
					let alarmInfo = res[1];
					let data = cnlData.map(item => {
						return {
							value: [moment(item.DateTime).format('x') * 1, (item.Val * 1).toFixed(2)],
							datetime: item.DateTime
						}
					})
					alarmInfo.forEach(v => {
						data.push({
							value: [moment(v.ChatTime).format('x') * 1, (v.Val * 1).toFixed(2)],
							name: v.Reason,
							datetime: v.ChatTime
						})
					})
					for(let i=0;i<data.length;i++) {
						for(let j=0;j<data.length;j++) {
							if(moment(data[i].datetime).isAfter(data[j].datetime, 'second')) {
								let temp = data[i];
								data[i] = data[j];
								data[j] = temp
							}
						}
					}
					this.options.xAxis[0].min = moment(this.date).format('YYYY-MM-DD') + ' 00:00';
					this.options.xAxis[0].max = moment(this.date).format('YYYY-MM-DD') + ' 23:59';
					this.options.series[0].data = data;
					this.options.yAxis.name = cnlData[0].Unit;
					
					let markPoint = []
					alarmInfo.forEach(item => {
						let xVal = moment(item.ChatTime).format('x') * 1;
						let yVal = item.Val*1;
						markPoint.push({
							name: item.Reason,
							coord: [xVal,yVal],
							symbolSize: 10,
							itemStyle: {
								color: "red"
							},
							symbol: 'image://static/theme/default/home/gaojing.png',
							symbolSize: 20,
							z: 3
						})
					})
					this.options.series[0].markPoint.data = markPoint
				})
			},
			/**
			 * 确认日期
			 */
			dateConfirm(e) {
				this.date = moment(e.value).format('YYYY-MM-DD')
				this.getChartData();
				this.dateVisible = false;
			},
			prev() {
				this.date = moment(this.date).subtract(1, 'day').format('YYYY-MM-DD');
				this.getChartData();
			},
			next() {
				this.date = moment(this.date).subtract(-1, 'day').format('YYYY-MM-DD');
				this.getChartData();
			},
			goPage() {
				let data = {
					device: this.data.Device,
					devicecode: this.data.DeviceCode
				}
				uni.navigateTo({
					url: '/pages/home/child/equipment/device?data=' + JSON.stringify(data),
				});
			},
			rightClick() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding-top: 44px;
		/* #ifdef APP-PLUS */
		padding-top: 150rpx;
		/* #endif */
		
		&__date {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			box-sizing: border-box;
		}
		
		&__chart {
			height: 400rpx;
			background-color: #fff;
			padding: 20rpx 0;
		}
	}
	
	.cnl {
		margin-bottom: 20rpx;
		
		&__params {
			height: 100rpx;
			background-color: #fff;
			padding-left: 20rpx;
			line-height: 100rpx;
		}
	}
	
	.device {
		margin-bottom: 20rpx;
		
		&__params {
			height: 100rpx;
			background-color: #fff;
			padding-left: 20rpx;
			line-height: 100rpx;
			position: relative;
		}
	}
</style>
